<template>
  <div>
    <div class="container">
      <div class="handle-box" @keypress.enter="getData">
        <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
        <el-input class="handle-input" v-model="search_text" :placeholder="search_type==1?'请输入关键字':'请输入视频ID'" size="mini" clearable>
          <el-select v-model="search_type" slot="prepend" placeholder="请选择">
            <el-option label="评论" value="1"></el-option>
            <el-option label="弹幕" value="2"></el-option>
          </el-select>
        </el-input>
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
      </div>
      
      <el-table size="mini" @selection-change="handleSelectionChange" border style="width:100%" height="668px" :data="data">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="consumerId" label="评论/弹幕用户ID" width="200" align="center"></el-table-column>
        <el-table-column v-if="search_type == 1" prop="videoId" label="评论/弹幕视频ID" width="200" align="center"></el-table-column>
        <el-table-column prop="content" label="评论/弹幕内容" width="850" align="center"></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination background class="page"
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
        >
      </el-pagination>
    </div>

    <el-dialog title="删除评论" :visible.sync="delVisible" center width="300px">
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span slot="footer">
        <el-button type="primary" @click="deleteRow">确定</el-button>
        <el-button @click="delVisible = false">取消</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import {getByContent,delComment,getBarrageById,delBarrage} from '../api/index'
import {mixin} from '../mixins/index'
export default {
  mixins:[mixin],
  data(){
    return {
      idx:-1,     //记录当前选中的行id
      row:-1,     //记录当前选中的行
      multipleSelection:[],  //那些项已经打钩
      search_type:'',  //搜索的类型
      search_text:'',  //筛选的关键字
      delVisible:false, //删除框
      tableData:[],   //显示的评论信息
      tempData:[],    //暂存的评论信息
      currentPage:1,  //当前页
      pageSize:15,    //每一页个数
    }
  },
  watch:{
    search_type(){
      this.currentPage = 1
      this.tableData = []
      this.tempData = []
      this.search_text = ''
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    },
  },
  methods:{
    //获取当前页
    handleCurrentChange(val){
      this.currentPage = val;
    },
    //查询所有评论
    getData(){
      if (this.search_text != '') {
        this.tempData=[]
        this.tableData=[]
        if (this.search_type == 1) {
          getByContent(this.search_text)
            .then(res =>{
              this.tempData = res
              this.tableData = res
              this.currentPage = 1
            }).catch(err =>{
              console.log(err);
            })
        }else{
          if (String(this.search_text).match(/^[0-9]*$/)) {
            getBarrageById(this.search_text)
              .then(res =>{
                this.tempData = res
                this.tableData = res
                this.currentPage = 1
              }).catch(err =>{
              console.log(err);
            })
          }
        }
      }
    },
    //弹出是否删除窗口
    handleDelete(row){
      if (this.search_type == 1) {
        this.idx = row.id
      }else{
        this.row = row
      }
      this.delVisible = true
    },
    //删除评论
    deleteRow(){
      if (this.search_type == 1) {
        delComment(this.idx)
          .then(res =>{
            if (res) {
              this.getData();
              this.notify('删除成功','success')
            }else{
              this.notify('删除失败','error')
            }
          })
      }else{
        let params = new URLSearchParams()
        params.append('id',this.search_text)
        params.append('delBarrage',"["+this.row.time+"]"+this.row.consumerId+":"+this.row.content)

        delBarrage(params)
      }
      this.delVisible = false
    },
    
  }
}
</script>

<style scoped>
@import '../assets/css/comment.css';
</style>